import React, { useEffect, useState } from "react";
import { Button, Toast } from "antd-mobile";
import $fetch from "../../../../utils/app/$fetch";
import SelectOption from "../../../../utils/ui/Select";

const StepOne = ({ state, dispatch }: any) => {
  const [personList, setPersonList] = useState([]);

  useEffect(() => {
    initPage();
  }, []);

  const initPage = async () => {
    const res: any = await $fetch("member/inf");

    setPersonList(res);
  };

  const changeMember = async() => {
    await $fetch(`star/updateStarMember?memberId=${state?.memberId}`, {}, { method: 'post', noGroupId: 'no'});
    Toast.show("修改成功！");
    dispatch({ currentStep: -1 });
  }

  const getOption = ({ memberId, memberName }: any) => {
    dispatch({ memberId, memberName });
  };

  return (
    <div className="that_step_one common_wraper">
      <div className="item_tip">选择星选成员</div>
      <div className="item_select">
        <SelectOption
          selectList={personList}
          getOption={getOption}
          initValue={{
            memberName: state?.memberName,
            memberId: state?.memberId,
          }}
        />
      </div>
      <div className="item_footer">
        <Button onClick={() => dispatch({ currentStep: -1 })}>取消</Button>
        <Button
          onClick={() => {
            if (state?.status === "yes") {
              changeMember();
            } else if (state?.status === "no") {
              if (!state?.memberName) {
                // Toast.show({content:"请选择星选成员！", duration:20000000});
                Toast.show("请选择星选成员！");
                return;
              }
              dispatch({ currentStep: 1 });
            }
          }}
        >
          确定
        </Button>
      </div>
    </div>
  );
};

export default StepOne;
